import React, { useState, useEffect } from 'react';
import { AutoCenter, SafeArea, FloatingBubble, Popup, Grid, List, InfiniteScroll } from 'antd-mobile'
import { MessageFill, AppstoreOutline } from 'antd-mobile-icons'
import logo from './logo.svg';
import './App.css';
import { plus } from 'types/plus';


function App() {
  const [MenuVisible, set_MenuVisible] = useState(false);
  const [hasMore, set_hasMore] = useState(true);
  const [Title, set_Title] = useState('Title');
  const [MenuID, set_MenuID] = useState('');
  const [PageNo, set_PageNo] = useState(1);

  //默认请求参数
  const GetOptions: RequestInit = {
    referrer: "https://gtv.17173.com/",
    referrerPolicy: "strict-origin-when-cross-origin",

    method: 'GET',
    //protocol: 'https:',
    //hostname: 'https://gtv.17173.com',
    //path: '/api/data',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json',
      "accept": "*/*",
    }
  }

  const loadMenu = () => {
    https://gtv.17173.com/api/gtv/v1/thread/sub?platform=web&timestamp=1687329958&access_token=9fa00b9248ad2b7efffeb4d6d9531cdb

    var xhr = new plus.net.XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
      }
    };
    xhr.open('GET', 'http://api.example.com/data');
    xhr.send();


    fetch("https://gtv.17173.com/api/gtv/v1/thread/sub?platform=web&timestamp=1687329958&access_token=9fa00b9248ad2b7efffeb4d6d9531cdb", { ...GetOptions })
      .then(res => {
        res.json();
      })
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.warn(err);
      })
      ;

  }
  const loadMore = async (isRetry: boolean) => {

  }

  useEffect(() => {
    loadMenu();
  }, [])


  return (
    <div className="App">
      <div style={{ background: '#ace0ff' }}>
        <SafeArea position='top' />
      </div>
      <div>
        <FloatingBubble
          axis='xy'
          magnetic='x'
          style={{
            '--initial-position-bottom': '24px',
            '--initial-position-right': '24px',
            '--edge-distance': '24px',
          }}
          onClick={() => { set_MenuVisible(!MenuVisible); }}
        >
          <AppstoreOutline fontSize={32} />
        </FloatingBubble>
        <Popup
          visible={MenuVisible}
          onMaskClick={() => {
            set_MenuVisible(false)
          }}
          position='left'
          bodyStyle={{ width: '30vw' }}
        >
          <List header='基础用法'>
            <List.Item>1</List.Item>
            <List.Item>2</List.Item>
            <List.Item>3</List.Item>
          </List>
        </Popup>
        <Grid columns={3} gap={8}>
          <Grid.Item span={3}>
            {Title}
          </Grid.Item>
          <Grid.Item>
            B
          </Grid.Item>
          <Grid.Item>
            C
          </Grid.Item>
          <Grid.Item>
            D
          </Grid.Item>
          <Grid.Item>
            E
          </Grid.Item>
        </Grid>

        <List header='基础用法'>
          <List.Item>1</List.Item>
          <List.Item>2</List.Item>
          <List.Item>3</List.Item>
        </List>

        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </div>
      <div style={{ background: '#ffcfac' }}>
        <SafeArea position='bottom' />
      </div>
    </div >

  );
}

export default App;
